<template>
	<view class="content">
		<view class="header">
			<view class="right" @tap="nextPage(`/pages/my/my?type=big`)">
				<u-icon name="arrow-left"></u-icon>
			</view>
			<view class="headerTitle">
				<text>个人信息</text>
			</view>
		</view>
		<view class="detail">
			<view class="photo">
				<text>头像</text>
				<view class="photoRight">
					<image :src="userinfo.headurl" mode=""></image>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="u-border-bottom"></view>
			<view class="name">
				<text>昵称</text>
				<view class="nameRight">
					<text>{{userinfo.nickname}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="u-border-bottom"></view>
			<!-- <view class="sex">
				<text>性别</text>
				<view class="sexRight">
					<text>女</text>
					<u-icon name="arrow-right"></u-icon>					
				</view>
			</view>
			<view class="u-border-bottom"></view>
			<view class="both">
				<text>生日</text>
				<view class="bithRight">
					<text>20201205</text>
					<u-icon name="arrow-right"></u-icon>					
				</view>
			</view>
			<view class="u-border-bottom"></view> -->
			<view class="tel">
				<text>手机号码</text>
				<text>{{userinfo.phone}}</text>
			</view>
			<view class="u-border-bottom"></view>
			<!-- 	<view class="email">
				<text>邮箱</text>
				<text>1234564789@qq.com</text>
			</view>
			<view class="u-border-bottom"></view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {
					nickname: "-",
					phone: "-",
					headurl: "/static/my/logo2.png"
				}
			}
		},
		onShow(){
			this.loadUserInfo();
		},
		methods: {
			loadUserInfo() {
				let userInfo = uni.getStorageSync("userInfo");
				if (userInfo) {
					uni.request({
						url: "http://redcrossadmin.isaw.top/api/User/GetMyInfo",
						data: {

						},
						method: "GET",
						header: {
							Authorization: userInfo.token,
						},
						success: (res) => {
							if(res.data.data.nickname){
								this.userinfo.nickname=res.data.data.nickname;
							}
							this.userinfo.phone=res.data.data.phone;
							if(res.data.data.headurl){
								this.userinfo.headurl=res.data.data.headurl;
							}
						},
					});
				}
			},
			//跳转列表对应页面
			nextPage(url) {
				uni.navigateTo({
					url: url,
					fail() {
						uni.switchTab({
							url: url,
							fail() {
								uni.showToast({
									title: '敬请期待',
									icon: 'none'
								});
							}
						});
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		.header {
			padding: 30rpx 0;
			display: flex;
			justify-content: center;
			background: #4F73FE;

			.u-icon {
				margin-left: 25rpx;
				margin-top: 6rpx;
				font-size: 40rpx;
				color: #FFFFFF;
			}

			.headerTitle {
				margin-right: 64rpx;
				width: 100%;
				text-align: center;

				text {
					font-size: 36rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		.detail {
			padding: 44rpx 40rpx;
			font-size: 28rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #555555;

			.u-icon {
				font-size: 30rpx;
				color: #C7C7CC;
			}

			.photo {
				padding: 35rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.photoRight {
					display: flex;
					align-items: center;

					image {
						margin-right: 20rpx;
						width: 102rpx;
						height: 102rpx;
					}
				}
			}

			.name {
				padding: 35rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					margin-right: 20rpx;
				}
			}

			.sex {
				padding: 35rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					margin-right: 20rpx;
				}
			}

			.both {
				padding: 35rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					margin-right: 20rpx;
				}
			}

			.tel {
				padding: 35rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					margin-right: 20rpx;
				}
			}

			.email {
				padding: 35rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					margin-right: 20rpx;
				}
			}
		}
	}
</style>
